<template>
  <div class="outContent">
    <h2>provide & inject</h2>
    <p :style="{ color: color }">this is outter content</p>
    <child-a></child-a>
  </div>
</template>

<script>
import ChildA from './components/ChildrenA.vue'
export default {
  components: { ChildA },
  data() {
    return {
      color: 'pink'
    }
  },
  provide() {
    return {
      dataObj: this
    }
  },
  methods: {
    changeColor(color) {
      this.color = color
    }
  }
}
</script>

<style scoped>
.outContent {
  padding: 50px;
  border: 1px solid blue;
}
</style>
